<template>
  <div class="recom">
    <h1>推荐MV</h1>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,i) in MVs" :key="i">
        <div class="coverImg" @click="toMVDetails(item.id)"><img :src="item.picUrl" :alt="item.name"></div>
        <div class="name" @click="toMVDetails(item.id)">{{item.name}}</div>
        <div class="songer" @click="toSongerDetails(item.songerId)">{{item.songer}}</div>
        <div class="playCount"><img src="../../../assets/img/播放图标.png" alt="error"><span>{{item.playCount}}</span></div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  name: "RecommentMV",
  props: ["MVs"],
  methods: {
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
    },
  }
}
</script>

<style scoped>
.recom {
  background: -webkit-linear-gradient(
    top,
    RGB(246, 246, 246),
    RGB(255, 255, 255)
  );
  margin: 40px 0 50px 0;
  padding: 10px 20px;
}
.recom h1 {
  text-align: center;
}
.coverImg img {
  width: 100%;
  height: 169px;
}
.name {
  font-size: 1rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.name:hover {
  color: RGB(64, 158, 255);
}
.songer {
  width: 100%;
  font-size: 1rem;
  color: RGB(153, 153, 153);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.songer:hover {
  color: RGB(64, 158, 255);
}
.playCount span {
  font-size: 1rem;
  color: RGB(153, 153, 153);
}
.playCount img {
  width: 1rem;
  height: 1rem;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.el-col div {
  margin-bottom: 3px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>